<template>
  <div class="chart">
    <el-card class="left">
      <div ref="main" class="strip" />
    </el-card>
    <el-card class="right">
      <div ref="mains" class="pie" />
    </el-card>
  </div>

</template>

<script>
// 引入库
import * as echarts from 'echarts'
import { Prices } from '@/api/property'
export default {
  data() {
    return {
      Price: []
    }
  },
  // 房产数据获取
  async created() {
    const { data } = await Prices()
    console.log(data)
    this.Price = data.map(item => {
      return item.price
    })
    console.log(this.Price)
  },
  // 由于需要dom元素所以要写在mounted里面
  mounted() {
    // 实际绘图配置
    // 基于准备好的dom，初始化echarts实例
    const myChartLeft = echarts.init(this.$refs.main)
    const myChartRight = echarts.init(this.$refs.mains)
    // 左侧图表
    myChartLeft.setOption({
      // 图标设置
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      // 高度设置
      grid: {
        height: 300
      },
      title: {
        text: '价格数量分布',
        subtext: '数据表'
      },
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['1000', '公寓', '别墅', '套房'],
          ['2000', 15, 85.8, 5],
          ['3000', 25.5, 62.5, 20],
          ['4000', 92.5, 92.5, 30.5],
          ['6000', 92.5, 55.3, 92.5],
          ['8000', 11.5, 23.9, 55.5]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    })
    // 右侧图表save
    myChartRight.setOption({
      title: {
        text: '房产数量比例',
        subtext: '数据表'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '公寓' },
            { value: 735, name: '别墅' },
            { value: 580, name: '套房' }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.chart{
  margin-top:50px;
 display: flex;
justify-content: space-around
}
.left{
  margin-left: 5px;
  width: 48%;
}
.right{
  margin-right: 5px;
 width: 48%;
}
.strip{
height:400px;
width:100%
}
.pie{
  height:400px;
  width:100%
}
</style>
